<template>
  <d2-container>
    <div class="flex-1 mt-2 ml-2">
      <div class="row-ac pb-2">
        <div><el-button type="warning" @click="addMemberLevel" size="small" icon="el-icon-plus">添加等级</el-button></div>
      </div>
      <div class="mt-2" style="width: 80%;">
        <el-table :data="memberlevelList" border stripe>
          <el-table-column align="center" label="序号" type="index" width="45" />
          <el-table-column align="center" label="等级名称" prop="level_name" width="80" />
          <el-table-column align="center" label="达成条件" prop="level_conditions" width="80" />
          <el-table-column align="center" label="维护积分" prop="subtract_points" width="80" />
          <el-table-column align="center" label="排序" prop="sort" width="60" />
          <el-table-column align="center" label="操作" width="130">
            <template slot-scope="scope">
              <el-button size="mini" @click="handleEdit(scope.row.id)">修改</el-button>
              <el-button size="mini" type="danger" @click="openDelete(scope.row.id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-dialog :visible.sync="dialogVisible" width="40%" title="添加/编辑等级">
        <el-form :model="form" ref="form" label-width="80px">
          <div class="mt-2">
            <el-form-item label="等级名称" prop="level_name">
              <div style="width: 50%;">
                <el-input v-model="form.level_name" size="medium" placeholder="请输入等级名称"></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="mt-2">
            <el-form-item label="排序" prop="sort">
              <div style="width: 24%;">
                <el-input v-model="form.sort" size="medium" placeholder="非必填"></el-input>
              </div>
            </el-form-item>
          </div>
          <div class="mt-2">
            <el-form-item label="达成积分" prop="level_conditions">
              <el-input-number v-model="form.level_conditions" :min="0" size="medium"></el-input-number>
            </el-form-item>
          </div>
          <div class="mt-2">
            <el-form-item label="维护积分" prop="subtract_points">
              <el-input-number v-model="form.subtract_points" :min="0" size="medium"></el-input-number>
            </el-form-item>
          </div>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="submitForm">确 定</el-button>
        </div>
      </el-dialog>
    </div>
  </d2-container>
</template>

<script>
  import {
    memberlevelListUrl,
    memberlevelDetailUrl,
    memberlevelCreateUrl,
    memberlevelUpdateUrl,
    memberlevelDeleteUrl,
  } from '@/utils/interface'
  export default {
    name: 'userLevel',
    data() {
      return {
        dialogVisible: false,
        addLevelStatus: true,
        memberlevelList: [],
        form: {
          level_name: '',
          sort: 1,
          level_conditions: '',
          subtract_points: ''
        },
        getLevelId: ''
      }
    },
    created() {
      this.getMemberlevelList()
    },
    methods: {
      getMemberlevelList() {
        this.$get(memberlevelListUrl).then(res => {
          if (res.data.code == 200) {
            this.memberlevelList = res.data.data.list
          }
        })
      },
      addMemberLevel() {
        this.dialogVisible = true
        this.addLevelStatus = true
      },
      handleEdit(levelId) {
        this.dialogVisible = true
        this.addLevelStatus = false
        this.getLevelId = levelId
        this.$get(memberlevelDetailUrl + levelId + '/').then(res => {
          if (res.data.code == 200) {
            this.form = {
              level_name: res.data.data.level_name,
              sort: res.data.data.sort,
              level_conditions: res.data.data.level_conditions,
              subtract_points: res.data.data.subtract_points
            }
          }
        })
      },
      openDelete() {

      },
      submitForm() {
        if(this.addLevelStatus){
          this.$post(memberlevelCreateUrl, this.form).then(res=>{
            if (res.data.code == 200){
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.dialogVisible = false
              this.getMemberlevelList()
              this.form = {}
            }
          })
        }else{
          this.$put(memberlevelUpdateUrl + this.getLevelId + '/', this.form).then(res=>{
            if (res.data.code == 200){
              this.$message({
                type: 'success',
                message: '添加成功!'
              })
              this.dialogVisible = false
              this.getMemberlevelList()
              this.form = {}
            }
          })
        }
      }
    }
  }
</script>
